<template>
  <div class="all">
    <el-collapse v-model="isCollapse"
                 accordion>
      <el-collapse-item name="item1">
        <template slot="title">
          图表和排行榜<i class="header-icon el-icon-s-data" />
        </template>
        <div class="headChart">
          <el-row :gutter="20">
            <el-col :span="16">
              <div class="chartDiv">
                <echart />
                </echart>
              </div>
            </el-col>
            <el-col :span="8">

              <el-switch v-model="byYearOrMonth"
                         active-text="年排行"
                         inactive-text="月排行"
                         center />
              <el-table :data="byYearOrMonth?rankingListYear:rankingList"
                        class="rankTable">
                <el-table-column type="index"
                                 width="50" />
                <el-table-column property="name"
                                 label="姓名"
                                 width="120" />
                <el-table-column property="point"
                                 label="积分"
                                 width="120" />
              </el-table>

            </el-col>
          </el-row>
        </div>
      </el-collapse-item>
    </el-collapse>
    <el-form ref="queryForm"
             :model="queryParams"
             :inline="true"
             style="margin-top=30px"
             label-width="100px">
      <el-form-item label="活动类型">
        <el-select v-model="actvitiyType"
                   placeholder="请选择"
                   style="width: 240px">
          <el-option v-for="item in actvitiyTypeOptions"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="活动名称"
                    prop="activityTitle">
        <el-input v-model="queryParams.activityTitle"
                  placeholder="请输入活动名称"
                  clearable
                  size="small"
                  style="width: 240px"
                  @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="发起人姓名"
                    prop="initiatorName">
        <el-input v-model="queryParams.initiatorName"
                  placeholder="请输入发起人姓名"
                  clearable
                  size="small"
                  style="width: 240px"
                  @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="参与人姓名"
                    prop="participatorName">
        <el-input v-model="queryParams.participatorName"
                  placeholder="请输入发起人姓名"
                  clearable
                  size="small"
                  style="width: 240px"
                  @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker v-model="createDateRange"
                        size="small"
                        style="width: 240px"
                        value-format="yyyy-MM-dd"
                        type="daterange"
                        range-separator="-"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期" />
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker v-model="endDateRange"
                        size="small"
                        style="width: 240px"
                        value-format="yyyy-MM-dd"
                        type="daterange"
                        range-separator="-"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期" />
      </el-form-item>

      <el-form-item style="margin-left: 40px">
        <el-button type="primary"
                   icon="el-icon-search"
                   size="mini"
                   @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh"
                   size="mini"
                   @click="resetMemberQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="activitiesTable"
              style="width: 100%"
              :default-sort="{ prop: 'helpTime', order: 'descending' }">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left"
                   inline
                   class="demo-table-expand">
            <el-form-item label="发起人姓名">
              <span>{{ props.row.initiatorid }}</span>
            </el-form-item>
            <el-form-item label="活动名称">
              <span>{{ props.row.activitytitle }}</span>
            </el-form-item>
            <el-form-item label="发起人 ID">
              <span>{{ props.row.initiatorid }}</span>
            </el-form-item>
            <el-form-item label="地址">
              <span>{{ props.row.initiatorAddress }}</span>
            </el-form-item>
            <el-form-item label="发起人电话">
              <span>{{ props.row.initiatorPhone }}</span>
            </el-form-item>
            <el-form-item label="创建时间">
              <span>{{ props.row.createtime }}</span>
            </el-form-item>
            <el-form-item label="结束时间">
              <span>{{ props.row.endtime }}</span>
            </el-form-item>
            <br>
            <el-divider v-if="
                props.row.participators != null && props.row.participators.length >= 1
              " />
            <el-form v-for="participator in props.row.participators"
                     :key="participator">
              <el-form-item label="参与者姓名">
                <span>{{ participator.participatorName }}</span>
              </el-form-item>
              <el-form-item label="参与者 ID">
                <span>{{ participator.participatorId }}</span>
              </el-form-item>
              <el-form-item label="参与者电话">
                <span>{{ participator.participatorPhone }}</span>
              </el-form-item>
              <el-form-item label="参与时间">
                <span>{{ participator.participateTime }}</span>
              </el-form-item>
            </el-form>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="活动 ID"
                       prop="activityid" />
      <el-table-column label="发起人姓名"
                       prop="initiatorName" />
      <el-table-column label="活动类型"
                       prop="theme" />
      <el-table-column label="创建时间"
                       prop="createtime"
                       sortable />
      <el-table-column label="结束时间"
                       prop="endtime"
                       sortable />
      <el-table-column label="操作"
                       center>
        <template slot-scope="scope">
          <el-button size="mini"
                     type="text"
                     icon="el-icon-edit"
                     @click="handleUpdate(scope.row)">修改</el-button>
          <el-button size="mini"
                     type="text"
                     icon="el-icon-delete"
                     @click="handleDelete(scope.row)">删除</el-button>
          <el-button size="mini"
                     type="text"
                     icon="el-icon-notebook-1"
                     @click="handleInfo(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- <pagination v-show="total > 0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList" /> -->
    <!-- 老人报警详情dialog -->
    <el-dialog title="老人一键求助详情"
               center
               :visible.sync="infoFlag">
      <el-table :data="infoTable"
                stripe>
        <el-table-column label="求助时间"
                         prop="time"
                         center />
        <el-table-column label="小程序推送情况"
                         prop="type" />
      </el-table>
    </el-dialog>
    </echart>
  </div>
</template>
<script>
import echart from '../../components/ActivitiesList/echart.vue'
import { listActivities } from "@/api/heart/activitiesList"
export default {
  components: { echart },
  data () {
    return {
      isCollapse: 'item1',
      rankingList: [
        {
          rank: 1,
          name: '张伟',
          point: 77
        },
        {
          rank: 2,
          name: '王伟',
          point: 72
        },
        {
          rank: 3,
          name: '李伟',
          point: 70
        },
        {
          rank: 4,
          name: '王芳',
          point: 69
        },
        {
          rank: 5,
          name: '李秀英',
          point: 66
        },
        {
          rank: 6,
          name: '张秀英',
          point: 60
        },
        {
          rank: 7,
          name: '李娜',
          point: 58
        },
        {
          rank: 8,
          name: '张敏',
          point: 57
        },
        {
          rank: 9,
          name: '李静',
          point: 55
        },
        {
          rank: 10,
          name: '张兰',
          point: 53
        },
        {
          rank: 11,
          name: '张红',
          point: 52
        },
        {
          rank: 12,
          name: '张玲',
          point: 49
        },
        {
          rank: 13,
          name: '张芳',
          point: 48
        },
        {
          rank: 14,
          name: '李鹏',
          point: 46
        },
        {
          rank: 15,
          name: '李宁',
          point: 37
        }
      ],
      rankingListYear: [
        {
          rank: 1,
          name: '张伟',
          point: 177
        },
        {
          rank: 2,
          name: '王伟',
          point: 172
        },
        {
          rank: 3,
          name: '李伟',
          point: 170
        },
        {
          rank: 4,
          name: '王芳',
          point: 169
        },
        {
          rank: 5,
          name: '李秀英',
          point: 166
        },
        {
          rank: 6,
          name: '张秀英',
          point: 160
        },
        {
          rank: 7,
          name: '李娜',
          point: 158
        },
        {
          rank: 8,
          name: '张敏',
          point: 157
        },
        {
          rank: 9,
          name: '李静',
          point: 155
        },
        {
          rank: 10,
          name: '张丽',
          point: 153
        },
        {
          rank: 11,
          name: '张红',
          point: 152
        },
        {
          rank: 12,
          name: '张玲',
          point: 149
        },
        {
          rank: 13,
          name: '张芳',
          point: 148
        },
        {
          rank: 14,
          name: '李鹏',
          point: 146
        },
        {
          rank: 15,
          name: '李宁',
          point: 137
        }
      ],
      byYearOrMonth: undefined,
      tempId: 'myChart',
      tempDataSet:
        [
          ['product', '2012', '2013', '2014', '2015'],
          ['儿童', 41.1, 30.4, 65.1, 53.3],
          ['家属', 86.5, 92.1, 85.7, 83.1],
          ['社区', 24.1, 67.2, 79.5, 86.4],
          ['夕阳', 41.1, 30.4, 65.1, 53.3]
        ],
      elderlyTable: [
        {
          id: '123123123',
          name: '张春华',
          sex: '女',
          age: 72,
          createTime: '2021-01-01 20:20:01',
          address: '盛唐小区第5栋2单元401室',
          telephone: '13555555555',
          helpTime: '2021-06-15 22:10:10',
          families: [
            {
              elderlyId: '123123123',
              name: '王刚',
              ralation: '母子',
              telephone: '18512345659'
            },
            {
              elderlyId: '123123123',
              name: '王菊',
              ralation: '母女',
              telephone: '18512347894'
            }
          ]
        },
        {
          id: '123123178',
          name: '王花',
          age: 89,
          sex: '女',
          createTime: '2021-02-19 11:02:18',
          address: '盛唐小区第1栋7单元302室',
          telephone: '13555555555',
          helpTime: '2021-06-14 19:10:10',
          families: null
        },
        {
          id: '123123178',
          name: '李建',
          sex: '男',
          age: 85,
          createTime: '2021-01-31 09:20:01',
          address: '盛唐小区第5栋4单元302室',
          telephone: '13555555555',
          helpTime: undefined,
          families: null
        }
      ],
      activitiesTable: [
        {
          activityId: 123465,
          activityTitle: '有偿租借汽车',
          activityType: '家属求助',
          initiatorName: '张三',
          initiatorId: 654612,
          createTime: '2021-01-31 09:20:01',
          endTime: '2021-02-01 13:17:01',
          initiatorAddress: '盛唐小区第5栋2单元401室',
          initiatorPhone: 18500001234,
          participators: [{
            participatorId: 789123,
            participatorName: '王刚',
            participatorPhone: 13900007894,
            participateTime: '2021-01-31 18:02:46'
          }]
        },
        {
          activityId: 123465,
          activityTitle: '有偿租借汽车',
          activityType: '家属求助',
          initiatorName: '张三',
          initiatorId: 654612,
          createTime: '2021-01-31 09:20:01',
          endTime: undefined,
          initiatorAddress: '盛唐小区第5栋2单元401室',
          initiatorPhone: 18500001234,
          participators: [{
            participatorId: undefined,
            participatorName: undefined,
            participatorPhone: undefined,
            participateTime: ''
          }]
        },
        {
          activityId: 123465,
          activityTitle: '有偿租借汽车',
          activityType: '家属求助',
          initiatorName: '张三',
          initiatorId: 654612,
          createTime: '2021-01-31 09:20:01',
          endTime: undefined,
          initiatorAddress: '盛唐小区第5栋2单元401室',
          initiatorPhone: 18500001234,
          participators: []
        }
      ],
      total: 2,
      actvitiyTypeOptions: [
        {
          value: '儿童发布',
          label: '儿童发布'
        }, {
          value: '社区关爱',
          label: '社区关爱'
        }, {
          value: '家属求助',
          label: '家属求助'
        }, {
          value: '夕阳论坛',
          label: '夕阳论坛'
        }
      ],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        activityId: null,
        activitytitle: null,
        initiatorId: null,
        createtime: null,
        endtime: null,
        point: null,
        statusflag: null,
        theme: null,
        communityid: null
      },
      createDateRange: [],
      endDateRange: [],
      // 老人报警详情flag
      infoFlag: false,
      infoTable: [
        {
          time: '2021-05-31 10:20:10',
          type: '已推送'
        },
        {
          time: '2021-05-31 10:20:10',
          type: '已推送'
        },
        {
          time: '2021-05-31 10:20:10',
          type: '已推送'
        },
        {
          time: '2021-05-31 10:20:10',
          type: '已推送'
        }
      ]
    }
  },
  created(){
    this.initList()
  },
  computed: {
    rankingNumber: function () {
      return function (index) {
        if (index == 1) return '<i class="el-icon-delete"></i>'
        return index
      }
    }
  },
  methods: {
    initList(){
      let param1 = this.addDateRange(this.queryParams,this.createDateRange,"CreateTime")
      let param2 = this.addDateRange(param1,this.endDateRange,"EndTime")
      listActivities(param2).then(response => {
        this.activitiesTable = response.rows
      })
    },
    handleQuery(){
      this.initList()
    },
    handleInfo () {
      this.infoFlag = true
    }
  }
}
</script>

<style>
.all {
  margin: 25px auto;
  width: 80%;
}
.headChart {
  margin-bottom: 30px;
}
.chartDiv {
  widows: 100%;
  height: 730px;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.rankTable {
  margin-top: 15px;
}
</style>
